<!-- MechanismList.vue -->
<template>
    <div class="friend-list">
        <el-row type="flex" justify="start" align="middle" style="margin-bottom: 16px;">
            <el-radio-group size="small" v-model="sex" style="margin-right: 16px;">
              <el-radio-button :label="0">全部</el-radio-button>
              <el-radio-button :label="1">男</el-radio-button>
              <el-radio-button :label="2">女</el-radio-button>
            </el-radio-group>
            <el-radio-group size="small" v-model="platform" style="margin-right: 16px;">
              <el-radio-button :label="0">全部</el-radio-button>
              <el-radio-button :label="2">WeGame</el-radio-button>
              <el-radio-button :label="1">Steam</el-radio-button>
            </el-radio-group>
            <!-- <el-radio-group size="small" v-model="contactType">
              <el-radio-button :label="0">全部</el-radio-button>
              <el-radio-button :label="1">QQ</el-radio-button>
              <el-radio-button :label="2">微信</el-radio-button>
            </el-radio-group> -->
        </el-row>
        
        <el-table
                v-loading="loading"
                :data="totalData"
                style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="描述">
                    <span>{{ props.row.desc }}</span>
                  </el-form-item>
                  <el-form-item label="平台">
                    <span>{{ typeObject[props.row.type] }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="昵称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sex"
                    label="性别"
                    width="180">
                    <template slot-scope="props">
                        <span>{{sexObject[props.row.sex] }}</span>
                    </template>
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="添加日期"
                    width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handlePageChange"
          :page-size="10"
          :pager-count="11"
          layout="total, prev, pager, next"
          :total="total">
        </el-pagination>
    </div>
</template>
<script>
    import { MessageBox, Message } from 'element-ui';

    export default{
        name:'TechList',
        data(){
            return {
                dialogVisible : false,
                loading : false,
                currentTabs: [],
                totalData: [],   // 获取总数据
                currentData:[],   // 当前渲染的数据
                itemDetailData : {},
                active: 'body',
                pageSize: 10,
                pageNum: 0,
                sex: 0,
                platform: 0,
                contactType: 0,
                total: 0,
                sexObject: {
                    '1': '男',
                    '2': '女'
                },
                typeObject: {
                    '1': 'Steam',
                    '2': 'WeGame'
                }
            }
        },
        activated(){
            this.fetchData();
        },
        watch: {
            '$store.state.version' : function () {
                this.fetchData();
            },
            platform () {
              this.fetchData()
            },
            sex () {
              this.fetchData()
            }
        },
        methods: {
            handlePageChange (pageNum) {
                this.pageNum = pageNum - 1
                this.fetchData()
            },
            handleClick () {
                this.pageNum = 0
                this.fetchData()
            },
            /**
             * 获取列表数据
             **/
            fetchData(){
                this.loading = true;
                this.axios.get(`message?pageSize=10&pageNum=${this.pageNum}`,{
                    params : {
                        version : this.$store.state.version,
                        type: this.platform,
                        sex: this.sex
                    }
                })
                    .then(res=>{
                        this.totalData = res.data.data;
                        this.total = res.data.total
                        this.loading = false;
                    })
            },
            /**
             * 获取详情数据
             **/
            toDetail(id){
                this.$router.push({
                    path : '/mechanism-detail',
                    query : {
                        id : id
                    }
                })
            },
            handleDelete(id) {
                MessageBox.confirm('此操作将永久删除该选项, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning',
                  center: true
                }).then(async () => {
                  const res = await this.axios.post('message/delete', {
                    id: id
                  })
                  if (res.data.code === 0) {
                    if (this.totalData.length === 1) {
                        this.pageNum = this.pageNum > 0 ? this.pageNum - 1 : 0
                    }
                    this.fetchData()
                    Message({
                        type: 'success',
                        message: '删除成功!'
                    });
                  } else {
                    Message({
                        type: 'error',
                        message: '删除失败!'
                    });
                  }
                  
                }).catch(() => {
                });
            }
        }
    }
</script>

<style lang="scss">
    .friend-list {
        .el-tabs {
            max-width: 85%;
        }
    }
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
</style>

<style lang="scss" scoped>
.friend-list{
    // display: flex;
    position: relative;
    padding: 16px;
    .basic-attribute {
        height: 60px !important;
    }
    .margin-right-12{
        margin-right: 12px;
    }
    .not-have {
        // display: flex;
    }
    .upload-position{
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 1;
    }
    .material {
        display: flex;
        align-items: center;
        img {
            width: 32px;
        }
    }
    .material-img {
        width: 32px;
    }
}
</style>
